<template>
  <view class="worktime">
    <view class="contant">
      <view class="title">公司标准工作时间</view>
      <view class="word"> 添加工作时间，标准时间仅为求职者提供参考，不代表 公司下所有职位工作时间 </view>
      <view class="com-title">职位名称</view>
      <view class="change-time" @click="changeTime">
        <view class="name" :class="time ? 'time' : ''">{{ time ? time : '选择工作时间' }}</view>
        <!-- <u-icon name="arrow-down" color="#999" size="28"></u-icon> -->
        <text class="yzb yzb-next"></text>
      </view>
      <view class="com-title">休息时间(可选)</view>
      <view class="skill-item">
        <text v-for="(item, index) in restTimes" :key="index" @click="selectRest(index)" class="item" :class="item.val == timeCurrent ? 'text-blue' : ''">
          {{ item.label }}
        </text>
      </view>
      <view class="com-title">加班情况(可选)</view>
      <view class="skill-item">
        <text v-for="(item, index) in overTimes" :key="index" @click="selectRest(index)" class="item" :class="item.val == timeCurrent ? 'text-blue' : ''">
          {{ item.label }}
        </text>
      </view>
    </view>
    <!-- <u-popup :show="show" @close="closeFun" @open="openFun" round="20">
      <view class="pop-cont">
        <view class="header">
          <text class="cancle">取消</text>
          <text class="title">选择工作时间</text>
          <text class="sure">确认</text>
        </view>
        
      </view>
    </u-popup> -->
    <yun-picker-time-range ref="pickTime" @confirm="confirmTime"></yun-picker-time-range>
    <bottom-button :isFixed="true" @sendFun="submit" text="确认保存"></bottom-button>
  </view>
</template>
<script>
import yunPickerTimeRange from './template/yun-picker-time-range'
export default {
  emits: ['cancle', 'confirm'],
  components: {
    'yun-picker-time-range': yunPickerTimeRange,
  },
  data() {
    return {
      timeCurrent: 1,
      restTimes: [
        {
          label: '双休',
          val: 1,
        },
        {
          label: '单休',
          val: 2,
        },
        {
          label: '排班轮休',
          val: 4,
        },
      ],
      overTimes: [
        {
          label: '不加班',
          val: 1,
        },
        {
          label: '偶尔加班',
          val: 2,
        },
        {
          label: '弹性工作',
          val: 3,
        },
      ],
      time: '',
    }
  },
  methods: {
    selectRest() {},
    closeFun() {
      this.show = false
    },
    openFun() {},
    changeTime() {
      console.log(this.$refs, 'this.$refs')
      this.$refs.pickTime.openFun()
    },
    confirmTime(e) {
      this.time = e.start_time + '~' + e.end_time

      console.log(e, '时间')
    },
  },
}
</script>
<style scoped lang="scss">
.worktime {
  .contant {
    padding: 60rpx 30rpx;
    color: #333333;
    .title {
      font-weight: bold;
      font-size: 52rpx;
    }
    .word {
      color: #666666;
      line-height: 45rpx;
      margin: 30rpx 0 50rpx;
    }
    .com-title {
      font-weight: bold;
      font-size: 36rpx;
      margin: 36rpx 0;
    }
    .change-time {
      display: flex;
      justify-content: space-between;
      padding-bottom: 30rpx;
      border-bottom: 1px solid #f9f9f9;
      .name {
        color: #999;
        font-size: 30rpx;
      }
      .yzb-next {
        color: #999;
        font-size: 34rpx;
        font-weight: bold;
      }
    }
    .skill-item {
      display: flex;
      justify-content: space-between;
      text {
        font-size: 32rpx;
        color: #666666;
        width: 210rpx;
        line-height: 78rpx;
        border-radius: 6rpx;
        border: 1px solid #e6e6e6;
        text-align: center;
        display: inline-block;
      }
      .text-blue {
        color: #3a92ff;
        border: 1px solid #3a92ff;
      }
    }
    .time {
      color: #333 !important;
    }
  }
}
</style>
